<template>
  <div style="width:100%;overflow: hidden">
    <div class="back" @click="tologin">
      <i class="el-icon-close"></i>我的金币
    </div>
    <div class="mycoin">
      <div>
        <p>2000</p>
        <i class="el-icon-arrow-right"></i>
      </div>
      <span>当前金币</span>
    </div>
    <div class="shoptitle">
      <p>兑换商品</p>
    </div>
    <div class="shoplist">
      <ul>
        <li>
          <div class="info">
            <p>3元品质联盟红包</p>
            <span class="cs1">90</span>金币<span class="cs2">限时优惠</span>
          </div>
          <div class="shop-info">
           <img src="https://fuss10.elemecdn.com/7/ec/adf8ae0fd52a0eb56f4332fb61ac2jpeg.jpeg?imageMogr/format/webp/thumbnail/!315x195r/gravity/Center/crop/315x195/">
          </div>
        </li>
        <li>
          <div class="info">
            <p>扫地机器人</p>
            <span class="cs1">500</span>金币<span class="cs2">特价换购</span>
          </div>
          <div class="shop-info">
            <img src="https://fuss10.elemecdn.com/5/78/5c1ca7ceca079926933ca418c9eb7jpeg.jpeg?imageMogr/format/webp/thumbnail/!315x195r/gravity/Center/crop/315x195/">
          </div>
        </li>
        <li>
          <div class="info">
            <p>数码经络按摩仪</p>
            <span class="cs1">500</span>金币<span class="cs2">特价换购</span>
          </div>
          <div class="shop-info">
            <img src="https://fuss10.elemecdn.com/e/b5/605a11eae79849240113271dd1b94jpeg.jpeg?imageMogr/format/webp/thumbnail/!315x195r/gravity/Center/crop/315x195/">
          </div>
        </li>
        <li>
          <div class="info">
            <p>悬浮机械手感发光游戏键鼠套装</p>
            <span class="cs1">100</span>金币<span class="cs2">特价换购</span>
          </div>
          <div class="shop-info">
            <img src="https://fuss10.elemecdn.com/7/ad/f0132ee0fee6c57253ada4573364ejpeg.jpeg?imageMogr/format/webp/thumbnail/!315x195r/gravity/Center/crop/315x195/">
          </div>
        </li>
        <li>
          <div class="info">
            <p>无线蓝牙耳机</p>
            <span class="cs1">500</span>金币<span class="cs2">特价换购</span>
          </div>
          <div class="shop-info">
            <img src="https://fuss10.elemecdn.com/b/5f/f1014b884c14aafde894e985f1116jpeg.jpeg?imageMogr/format/webp/thumbnail/!315x195r/gravity/Center/crop/315x195/">
          </div>
        </li>
        <li>
          <div class="info">
            <p>USB光触媒灭蚊灯</p>
            <span class="cs1">90</span>金币<span class="cs2">特价换购</span>
          </div>
          <div class="shop-info">
            <img src="https://fuss10.elemecdn.com/9/4e/b226b7ccfec536ca7423f545e65eejpeg.jpeg?imageMogr/format/webp/thumbnail/!315x195r/gravity/Center/crop/315x195/">
          </div>
        </li>
      </ul>
    </div>
    <div class="footer">
      更多<i class="el-icon-arrow-right"></i>
    </div>
  </div>
</template>
<script>
  export default {
    methods: {
      tologin () {
        this.$router.push('/login')
      }
    }
  }
</script>
<style lang="stylus" type="text/stylus" scoped>
  @import '../../common/stylus/mixin.styl'
  .back
    width :100%
    height :40px
    background-color :blue
    line-height :40px
    color :white
    padding-left :10px
    font-size :14px
    i
      margin-right :20px
      font-size :18px
  .mycoin
    height :100px
    width :100%
    background-color :blue
    color :white
    padding :40px 0 0 40px
    p
      font-size :46px
      display :inline-block
    span
      font-size :10px
  .shoptitle
    width :100%
    height :35px
    background-color :#ffe87c
    text-align :center
    line-height :35px
    box-shadow :1px 2px 3px #ffe87c
    p
      font-weight :bold

  .shoplist
      height :580px
    ul
      list-style :none
      li
        width :50%
        height :185px
        float :left
        border-bottom :1px solid rgba(7,17,27,.1)
        border-right :1px solid rgba(7,17,27,.1)
        box-sizing :border-box
        .info
          margin :10px 0 10px 10px
          color :#cccccc
          height :45px
          width :100%
          font-size :10px
          p
            font-size :16px
            font-weight :bold
            color :black
            margin-bottom :5px
            overflow :hidden
            width :100%
            white-space :nowrap
            text-overflow :ellipsis
          .cs1
            color :#dd6161
            font-weight :bold
            margin-right :5px
          .cs2
            padding :1px 3px
            color :white
            margin-left :5px
            border-radius :3px
            background-color :#dd6161
        .shop-info
          height :120px
          width :100%
          img
            width :100%
            height :120px
  .footer
    line-height :36px
    height :36px
    width :100%
    background-color :green
    text-align :center
    color :white
    i
      margin-left :10px
</style>
